if(!window["vg"]) {
	window["vg"] = {};
}
if(!vg.visualization) {
	vg.visualization = {};
}

vg.visualization.ProgressBar = function (inputObj) {
	inputObj = inputObj || {};
	this.width = inputObj.width || "134px";
	this.height = inputObj.height || "8px";
	this.orientation = inputObj.orientation || "horizontal";
	this.barLength = 0;
	if(this.orientation == "horizontal") {
		this.barColor = inputObj.barColor || "#CB2201";
		this.bgColor = inputObj.bgColor || "#ffffff";
	} else {
		this.barColor = inputObj.bgColor || "#ffffff";
		this.bgColor = inputObj.barColor || "#CB2201";
	}
	this.border = inputObj.border || "1px solid black";
	this.currentDimension = (["width", "height"])[({"horizontal" : 0, "vertical" : 1})[this.orientation]];
	this.animate = inputObj.animate || false;
	this.top = inputObj.top || "0px";
	this.left = inputObj.left || "0px";
	if(inputObj.sourceInput) {
		this.sourceInput = (inputObj.sourceInput.constructor == String) ? document.getElementById(inputObj.sourceInput) : inputObj.sourceInput;
		this.sourceInput.onchange = (function (that) {
			return function(){
				that.setValue(Number(that.sourceInput.value));
			};
		})(this);
	}
	if(this.animate) {
		this.stepTime = Number(inputObj.stepTime) || 15;
		this.stepSize = Number(inputObj.stepSize) || 1;
	}
	var sourceElement = document.getElementsByTagName("body")[0];
	this.parentDiv = document.createElement("div");
	sourceElement.appendChild(this.parentDiv);
	this.childDiv = document.createElement("div");
	this.parentDiv.appendChild(this.childDiv);
}

vg.visualization.ProgressBar.prototype = (function () {

	/**
	 * To draw the bar at the position specified
	 */
	var draw = function () {
		this.parentDiv.style.height = this.height;
		this.parentDiv.style.width = this.width;
		this.parentDiv.style.zIndex = 1;
		this.parentDiv.style.backgroundColor = this.bgColor;
		this.parentDiv.style.border = this.border;
		this.parentDiv.style.position = "absolute";
		this.parentDiv.style.top = this.top;
		this.parentDiv.style.left = this.left;
		this.childDiv.style.backgroundColor = this.barColor;
		if(this.orientation == "horizontal") {
			var title = this.childDiv.style.width = this.barLength + "%";
			this.childDiv.style.height = "100%";
		} else {
			title = this.childDiv.style.height = (100 - this.barLength) + "%";
		}
		this.childDiv.setAttribute("title", title);
		this.sourceInput && this.sourceInput.onchange();
	}
	
	/**
	 * To set the value of the bar
	 * @param {Object} value
	 */
	var setValue = function (value) {
		try {
			value = checkPercentValue(value);
		} catch (ex) {
			throw ex;
		}
		if(!this.animate) {
			this.barLength = value;
			updateBar(this);
			return;
		} else {
			animate(this, value);
		}	
	}
	
	var setBackgroundColor = function (color) {
		this[this.orientation == "horizontal" ? "bgColor" : "barColor"] = color;
		this.draw();
	}
	
	var setBarColor = function (color) {
		this[this.orientation == "horizontal" ? "barColor" : "bgColor"] = color;
		this.draw();		
	}
	
	var animate = function (that, targetLength) {
		var intervalId = setInterval(function () {
			var nextLength = 0;
			if(that.barLength > targetLength) {
				nextLength = that.barLength - that.stepSize;
				that.barLength = (nextLength < targetLength) ? targetLength : nextLength;
			} else if(that.barLength < targetLength) {
				nextLength = that.barLength + that.stepSize;
				that.barLength = (nextLength > targetLength) ? targetLength : nextLength;
			} else {
				clearInterval(intervalId);
				return;
			}
			updateBar(that);
		}, that.stepTime);
	}
	
	var updateBar = function (that) {
		var percent = (that.orientation == "horizontal" ? that.barLength : (100 - that.barLength));
		that.childDiv.style[that.currentDimension] = percent + "%";
		that.childDiv.setAttribute("title", percent + "%");
	}
	
	/**
	 * To check if the value is a valid percentage value. Returns the value with the percentage symbol.
	 * Throws error if invalid percent value is provided
	 * @param {Object} value
	 */
	var checkPercentValue = function (value) {
		if(value == undefined || value < 0 || value > 100) {
			throw "Please give a numeric value between 0 and 100";
		}
		return value;
	}
	
	return {
		draw : draw,
		setValue : setValue,
		setBackgroundColor : setBackgroundColor,
		setBarColor : setBarColor
	}
})();
scriptCallback && scriptCallback("Progress Bar");